<template>
    <div id="Beijing" style="width: 60%; height: 500px;"></div>
</template>
<script>
import * as echarts from 'echarts';
import Beijing from '@/json/Beijing.json'
export default {
    data() {

    },
    mounted() {
        this.drawMap()
    },
    methods: {
        drawMap() {
            let myChart = echarts.init(document.getElementById('Beijing'));
            echarts.registerMap('Beijing', Beijing);
            let data = [
                { name: "丰台区", value: 1205 },
                { name: "海淀区", value: 714 },
                { name: "大兴区", value: 503 },
                { name: "通州区", value: 386 },
                { name: "昌平区", value: 358 },
                { name: "朝阳区", value: 355 },
                { name: "房山区", value: 354 },
                { name: "顺义区", value: 279 },
                { name: "密云区", value: 238 },
                { name: "平谷区", value: 223 },
                { name: "怀柔区", value: 208 },
                { name: "门头沟区", value: 168 },
                { name: "石景山区", value: 156 },
                { name: "延庆区", value: 135 },
                { name: "西城区", value: 93 },
                { name: "东城区", value: 67 }
            ];
            let value = data.map(item => item.value);
            var maxValue = Math.max(...value);
            var minValue = Math.min(...value);
            var option = {
                title: {
                    text: '北京企业分布',
                    subtext: '更新时间:2024-11-30 01:00:00',
                    top: 10,
                    left: 15,
                    x: 'left',
                    textStyle: {
                        color: '#000'
                    }
                },
                visualMap: {
                    show: false,
                    orient: 'horizontal', // 设置为横向排列
                    left: 'center',
                    bottom: 20,
                    min: minValue,
                    max: maxValue,
                    pieces: [
                        { min: maxValue * 0.8, max: maxValue },
                        { min: maxValue * 0.5, max: maxValue * 0.8 },
                        { min: maxValue * 0.3, max: maxValue * 0.5 },
                        { min: minValue, max: maxValue * 0.3 },
                    ],
                    // 颜色
                    inRange: {
                        color: ['#2c998d', '#245fae', 'orange', 'red',]
                    },
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2
                },
                series: [
                    {
                        name: '北京轨道交通企业数量（家）',
                        type: 'map',
                        map: 'Beijing',
                        // roam: true,
                        label: {
                            show: true,
                            color: '#fff'
                        },
                        // 北京各个区域数据
                        data,

                    }
                ]
            }
            myChart.setOption(option)

        }
    }
}
</script>